
<template>
<div>
   <!-- DatePicker 日期选择器 -->
   <!-- 用于选择或输入日期 -->

   <!-- 1. 选择日-->
   <!-- 基本单位由type属性指定。 -->
   <el-date-picker v-model="value" type="date" placeholder="选择日期">
   </el-date-picker>


   <!-- 2. 选择日期范围-->
   <!-- 在选择日期范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前月份，可以使用unlink-panels属性解除联动。 -->
   <el-date-picker v-model="value" type="daterange"
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期">
   </el-date-picker>
</div>
</template>



<script>
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() { 
//这里存放数据
return {
   value:""
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
   
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>


<style>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
</style>

<style lang="less" scoped>
</style>